<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
<style>
		div{
			width: 344px;
			height: 199px;
			overflow: hidden;
		}
		ul{
			width: 1042px;
		}
		li{
			display: inline-block;
		}
        img{
            width: 344px;
			height: 199px;
        }
	</style>
	</head>
	<body>
		<div class="wrapper">
		        <ul>
		            <li><img src="./picture/picture0.jpg" ></li>
		            <li><img src="./picture/picture1.jpg" ></li>
		            <li><img src="./picture/picture2.jpg" ></li>
		        </ul>
		    </div>
            <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
    <script>

        var imgWidth = $(".wrapper").width();//ul移动一次的距离
        var imgLength = $("ul li").length;//判断索引为最后一个时，重新置为0
        var index = 0;//索引

        function changeImg(direction){
            if(direction == "left"){
                index++;
            }else{
                index--;
            }
            if(index == imgLength){
                index=0;
            }else if(index == -1){
                index=imgLength-1;
            }
            $("ul").stop().animate({
                marginLeft:-index*imgWidth+"px",
            },600)
        }

        function autoMove(){
            setInterval(function(){
                changeImg("left");

            },2000)
        }
        autoMove();
    </script>
	</body>
</html>